import { Box, Typography } from '@mui/material';

import Disbursement from '../../api/disbursement/disbursement';
import NumberTool from '../../libs/number-tool';
import NewProgressBar from '../shared/new-progress-bar';

interface Props {
    disbursement: Disbursement;
}

export const ActivePayoutItem = (props: Props) => {
    const getProgress = (): number => {
        return (props.disbursement.processed / props.disbursement.total) * 100;
    };

    return (
        <Box sx={{ width: 240, mb: 2 }}>
            <Box className="d-flex justify-content-between align-items-center">
                <Typography
                    variant="h6"
                    sx={{
                        width: 140,
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis'
                    }}
                >
                    {props.disbursement.title}
                </Typography>
                <Typography variant="h6" sx={{ fontSize: 11, color: '#FFBB59' }}>
                    {NumberTool.format(props.disbursement.totalAmount)}{' '}
                    {props.disbursement.currency}
                </Typography>
            </Box>
            <Typography variant="subtitle1" sx={{ fontSize: 11, color: '#BCB6E9', pb: 1 }}>
                Processing ({props.disbursement.processed}/{props.disbursement.total})...
            </Typography>
            <NewProgressBar progress={getProgress()} />
        </Box>
    );
};
